<template>
  <div style="padding: 0.5rem">
    <div style="margin-bottom: 0.5rem">
      <div class="title"><span class="icon"></span><span class="text">业务信息</span></div>
      <div class="content">
        <div class="row"><span class="col1">权利人：</span><span class="col2">{{qlr}}</span></div>
        <div class="row"><span class="col1">证件号：</span><span class="col2">{{zjh}}</span></div>
        <div class="row"><span class="col1">业务名称：</span><span class="col2">{{pro.procName}}</span></div>
        <!--<div class="row"><span class="col1">当前环节：</span><span class="col2">{{steps[current-1]}}</span></div>-->
        <div class="row"><span class="col1">受理编号：</span><span class="col2">{{pro.prjId}}</span></div>
        <div class="row"><span class="col1">受理日期：</span><span class="col2">{{pro.slsj}}</span></div>
      </div>
    </div>
    <div>
      <div class="title"><span class="icon"></span><span class="text">办理进度</span></div>
      <div class="steps">
        <Steps :current="current" direction="vertical">
          <Step v-for="(step,i) in steps" v-bind:title="step" content="" :key="step+i"></Step>
        </Steps>
      </div>
    </div>
    <div class="footer">
      本服务由{{GLOBAL.provider[this.GLOBAL.urlType]}}提供
    </div>
  </div>

</template>

<script>
    export default {
        name: "StepState",
        data(){
          return {
            dlwz: this.GLOBAL.dicHandle.getName(2,"dlwz"),
            current:0,
            steps:['开始','受理','审批','登簿','领证','完成'],
            pro: {
              /* "slsj": "2019-03-18 17:55:31",
               "procName": "预告登记",
               "slbh": "201903180007",
               "prjId": "201903180007"*/
            }
          }
        },
        mounted () {
          let that = this;
          /*ehbAppJssdk.operateWindow.getPrePageParams({
            success:function(res){
              var resJSON = JSON.parse(res);
              that.qlr = resJSON.qlr;
              that.zjh = resJSON.zjh;
              that.pro = JSON.parse(resJSON.pro);
            }
          });*/
          that.qlr = that.$route.params.qlr;
          that.zjh = that.$route.params.zjh;
          that.pro = JSON.parse(that.$route.params.pro);
          ehbAppJssdk.notice.showPreloader({text: "正在查询中..." });
          ehbAppJssdk.network.request({
            url: that.GLOBAL.urlConfig.queryStepState[that.GLOBAL.urlType],
            method:'post',
            data:{
              'prjId': that.pro.prjId
            },
            headers:{ 'contentType':'application/x-www-form-urlencoded'},
            success:function(res){
              ehbAppJssdk.notice.hidePreloader();
              if(res.status==0){
                for(let i in res.result){
                  let step = res.result[i];
                  if(step.stepState=="已完成"){
                    if(step.stepName=="受理"){
                      that.current = 2;
                    }
                    if(step.stepName=="登簿"){
                      that.current = 4;
                    }
                    if(step.stepName=="缮证"){
                      that.current = 6;
                    }
                  }else{
                    if(step.stepName=="登簿"){
                      that.current = 3;
                    }
                  }
                }
              }else{
                ehbAppJssdk.notice.alert({
                  title: '提示',
                  message:'查询失败!',
                  buttonName:'收到'
                })
              }
            },
            fail:function(res){
              ehbAppJssdk.notice.alert({
                title: '提示',
                message:'查询失败!',
                buttonName:'收到'
              })
            }
          })
        }
    }
</script>

<style scoped>
  .title .icon{
    width:0.1rem;
    height:0.34rem;
    background:rgba(61,117,197,1);
    display: inline-block;
    vertical-align: middle;
  }
  .title .text{
    width:6.20rem;
    height:0.4rem;
    font-size:0.32rem;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(39,49,64,1);
    line-height:0.4rem;
    margin-left: 0.2rem;
    display: inline-block;
    vertical-align: middle;
  }
  .content{
    margin-top: 0.2rem;
  }
  .content .row{
    margin-top: 0.1rem;
    height:0.32rem;
    font-size:0.26rem;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(165,173,185,1);
    line-height:0.32rem;
  }
  .content .col1{
    width:1.3rem;
    font-family:PingFangSC-Medium;
    font-weight:500;
    margin-right: 0.3rem;
    display: inline-block;
  }
  .steps{
    width: 27%;
    margin: 0.5rem auto;
  }
  .footer{
    height:0.34rem;
    font-size:0.26rem;
    font-family:PingFangSC-Regular;
    font-weight:400;
    line-height:0.34rem;
    position: absolute;
    left: 0rem;
    bottom: 0.8rem;
    text-align: center;
    color: #A5ADB9;
    width: 100%;
  }
</style>
